<template>
  <view class="content">



    <!-- 顶部选项卡 -->
    <scroll-view id="nav-bar" :scroll-left="scrollLeft" class="nav-bar" scroll-with-animation scroll-x>
      <view
          v-for="(item,index) in tabBars" :id="'tab'+index"
          :key="item.id"
          :class="{current: index === tabCurrentIndex}"
          class="nav-item"
          @click="changeTab(index,item.id)"
      >{{item.tagName}}</view>
    </scroll-view>

    <!-- 下拉刷新组件 -->
    <mix-pulldown-refresh ref="mixPulldownRefresh" :top="90" class="panel-content" @refresh="onPulldownReresh" @setEnableScroll="setEnableScroll">
      <!-- 内容部分 -->
      <swiper
          id="swiper"
          :current="tabCurrentIndex"
          :duration="300"
          class="swiper-box"
          @change="changeTab"
      >
        <swiper-item v-for="tabItem in tabBars" :key="tabItem.id">
          <scroll-view
              :scroll-y="enableScroll"
              class="panel-scroll-box"
              @scrolltolower="loadMore"
          >
            <!--
              * 新闻列表
              * 和nvue的区别只是需要把uni标签转为weex标签而已
              * class 和 style的绑定限制了一些语法，其他并没有不同
            -->

            <view v-for="(item, index) in tabItem.newsList" :key="index" class="news-item" @click="navToDetails(item)"
            >
              <text :class="['title', 'title'+item.categoryName]"></text>
              <view class="u-demo-block__content">
                <view class="album">
                  <view class="album__avatar">
                    <image
                        :src="item['author']['avatar']"
                        mode=""
                        style="width: 32px;height: 32px;"
                    ></image>
                  </view>
                  <view class="album__content">
                    <u--text
                        :text="item.author['nickname']"
                        bold
                        size="17"
                        type="primary"
                    ></u--text>
                    <u--text
                        :text="item.articleTitle"
                        margin="0 0 8px 0"
                        type="warning"
                    ></u--text>
                      <u--text
                          :text="item.content"
                          margin="0 8px 0 0"
                          size="14"
                      ></u--text>

                    <u-album :urls="[item.articleCover]" keyName="src2"></u-album>
                    <u--text
                        :text="item['updateTime']"
                        margin="4px 0 8px 0"
                        type="info"
                    ></u--text>
                  </view>
                </view>
              </view>

            </view>

            <!-- 上滑加载更多组件 -->
            <mix-load-more :status="tabItem.loadMoreStatus"></mix-load-more>
          </scroll-view>
        </swiper-item>
      </swiper>
    </mix-pulldown-refresh>

  </view>
</template>

<script>
import mixPulldownRefresh from '@/components/mix-pulldown-refresh/mix-pulldown-refresh';
import mixLoadMore from '@/components/mix-load-more/mix-load-more';
import {articlesList, typeList} from "@/pages/api/message/message";
import {useAttrStore} from "@/pinia/attricts";

let windowWidth = 0, scrollTimer = false, tabBar;
export default {
  components: {
    mixPulldownRefresh,
    mixLoadMore,
  },
  data() {
    return {
      tabCurrentIndex: 0, //当前选项卡索引
      scrollLeft: 0, //顶部选项卡左滑距离
      enableScroll: true,
      tabBars: [],
      wrapper:{
        current:1,
        size:10,
        tagId:''
      },
      currentId:"",
      store:useAttrStore(),
    }
  },

  async onLoad() {
    // 获取屏幕宽度
    windowWidth = uni.getSystemInfoSync().windowWidth;
    this.loadTabbars();
  },
  onReady(){

  },
  methods: {
    /**
     * 数据处理方法在vue和nvue中通用，可以直接用mixin混合
     * 这里直接写的
     * mixin使用方法看index.nuve
     */
    //获取分类
    loadTabbars(){
      typeList().then(({data})=>{
        let tabList = data;
        tabList.forEach(item=>{
          item.newsList = [];
          item.loadMoreStatus = 0;  //加载更多 0加载前，1加载中，2没有更多了
          item.refreshing = 0;
        })
        this.tabBars = tabList;
        this.wrapper.tagId = tabList[0].id;
        this.loadNewsList('add');
      })

    },
    //新闻列表
    loadNewsList(type){
      let tabItem = this.tabBars[this.tabCurrentIndex];

      //type add 加载更多 refresh下拉刷新
      if(type === 'add'){
        if(tabItem.loadMoreStatus === 2){
          return;
        }
        tabItem.loadMoreStatus = 1;
      }

        articlesList(this.wrapper).then(({data:{records,count}})=>{
          let list = records;

          if(type === 'refresh'){
            tabItem.newsList = [...[]]; //刷新前清空数组
          }
          list.forEach(item=>{
            tabItem.newsList.push(item);
          })
          //下拉刷新 关闭刷新动画
          if(type === 'refresh'){
            this.$refs.mixPulldownRefresh && this.$refs.mixPulldownRefresh.endPulldownRefresh();
            // #ifdef APP-PLUS
            tabItem.refreshing = false;
            // #endif
            tabItem.loadMoreStatus = 0;
          }
          //上滑加载 处理状态
          if(type === 'add'){
            tabItem.loadMoreStatus = tabItem.newsList.length > 40 ? 2: 0;
          }

          if (list.length===count){
            tabItem.loadMoreStatus=2
          }

        })

    },
    //新闻详情
    navToDetails(item){
      //存缓存
      let url = item.videoSrc ? 'videoDetails' : 'details';
      //this.store.saveAttrInfo(item)

      uni.navigateTo({
        url: `/pages/index/details/${url}?id=${item.id}`
      })
    },

    //下拉刷新
    onPulldownReresh(){
      this.loadNewsList('refresh');
    },
    //上滑加载
    loadMore(){
      this.wrapper.pageNo++
      this.loadNewsList('add');
    },
    //设置scroll-view是否允许滚动，在小程序里下拉刷新时避免列表可以滑动
    setEnableScroll(enable){
      if(this.enableScroll !== enable){
        this.enableScroll = enable;
      }
    },

    //tab切换
    async changeTab(e,id){
      this.wrapper.current=1
      if (id!== undefined){
        this.wrapper.tagId=id
      }else if (this.tabBars[e]){
        this.wrapper.tagId=this.tabBars[e].id
      }
      if(scrollTimer){
        //多次切换只执行最后一次
        clearTimeout(scrollTimer);
        scrollTimer = false;
      }
      let index = e;
      //e=number为点击切换，e=object为swiper滑动切换
      if(typeof e === 'object'){
        index = e.detail.current
      }
      if(typeof tabBar !== 'object'){
        tabBar = await this.getElSize("nav-bar")
      }
      //计算宽度相关
      let tabBarScrollLeft = tabBar.scrollLeft;
      let width = 0;
      let nowWidth = 0;
      //获取可滑动总宽度
      for (let i = 0; i <= index; i++) {
        let result = await this.getElSize('tab' + i);
        width += result.width;
        if(i === index){
          nowWidth = result.width;
        }
      }
      if(typeof e === 'number'){
        //点击切换时先切换再滚动tabbar，避免同时切换视觉错位
        this.tabCurrentIndex = index;
      }
      //延迟300ms,等待swiper动画结束再修改tabbar
      scrollTimer = setTimeout(()=>{
        if (width - nowWidth/2 > windowWidth / 2) {
          //如果当前项越过中心点，将其放在屏幕中心
          this.scrollLeft = width - nowWidth/2 - windowWidth / 2;
        }else{
          this.scrollLeft = 0;
        }
        if(typeof e === 'object'){
          this.tabCurrentIndex = index;
        }
        this.tabCurrentIndex = index;


        //第一次切换tab，动画结束后需要加载数据
        let tabItem = this.tabBars[this.tabCurrentIndex];
        if(this.tabCurrentIndex !== 0 && tabItem.loaded !== true){
          this.loadNewsList('add');
          tabItem.loaded = true;
        }
      }, 300)

    },
    //获得元素的size
    getElSize(id) {
      return new Promise((res, rej) => {
        let el = uni.createSelectorQuery().select('#' + id);
        el.fields({
          size: true,
          scrollOffset: true,
          rect: true
        }, (data) => {
          res(data);
        }).exec();
      });
    },
  }
}
</script>

<style lang='scss'>

page, .content{
  background-color: #f8f8f8;
  height: 100%;
  overflow: hidden;
}

/* 顶部tabbar */
.nav-bar{
  position: relative;
  z-index: 10;
  height: 90upx;
  white-space: nowrap;
  box-shadow: 0 2upx 8upx rgba(0,0,0,.06);
  background-color: #fff;
  .nav-item{
    display: inline-block;
    width: 150upx;
    height: 90upx;
    text-align: center;
    line-height: 90upx;
    font-size: 30upx;
    color: #303133;
    position: relative;
    &:after{
      content: '';
      width: 0;
      height: 0;
      border-bottom: 4upx solid #007aff;
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translateX(-50%);
      transition: .3s;
    }
  }
  .current{
    color: #007aff;
    &:after{
      width: 50%;
    }
  }
}

.swiper-box{
  height: 100%;
}

.panel-scroll-box{
  height: 100%;

  .panel-item{
    background: #fff;
    padding: 30px 0;
    border-bottom: 2px solid #000;
  }
}

/**
 * 新闻列表 直接拿的nvue样式修改，,
 * 一共需要修改不到10行代码, 另外px需要直接修改为upx，只有单位不一样，计算都是一样的
 * 吐槽：难道不能在编译的时候把nuve中的upx转为px? 这样就不用修改单位了
 */
.video-wrapper{
  width: 100%;
  height: 440upx;
  .video{
    width: 100%;
  }
}

view{
  display:flex;
  flex-direction: column;
}
.img{
  width: 100%;
  height: 100%;
}
.news-item{
  position:relative;
}
/* 修改结束 */

/* 新闻列表  emmm 仅供参考 */
.news-item{
  width: 750upx;
  padding: 24upx 30upx;
  border-bottom-width: 1px;
  border-color: #eee;
  background-color: #fff;
}
.title{
  font-size: 32upx;
  color: #303133;
  line-height: 46upx;
}
.bot{
  flex-direction: row;
}
.author{
  font-size: 26upx;
  color: #aaa;
}
.time{
  font-size: 26upx;
  color: #aaa;
  margin-left: 20upx;
}
.img-list{
  flex-shrink: 0;
  flex-direction: row;
  background-color: #fff;
  width: 220upx;
  height: 140upx;
}
.img-wrapper{
  flex: 1;
  flex-direction: row;
  height: 120upx;
  position: relative;
  overflow: hidden;
}
.img{
  flex: 1;
}
.img-empty{
  height: 20upx;
}

/* 图在左 */
.img-list1{
  position:absolute;
  left: 30upx;
  top: 24upx;
}
.title1{
  padding-left: 240upx;
}
.bot1{
  padding-left: 240upx;
  margin-top: 20upx;
}
/* 图在右 */
.img-list2{
  position:absolute;
  right: 30upx;
  top: 24upx;
}
.title2{
  padding-right: 210upx;
}
.bot2{
  margin-top: 20upx;
}
/* 底部3图 */
.img-list3{
  width: 700upx;
  margin: 16upx 0upx;
}
.img-wrapper3{
  margin-right: 4upx;
}
/* 底部大图 */
.img-list-single{
  width: 690upx;
  height: 240upx;
  margin: 16upx 0upx;
}
.img-wrapper-single{
  height: 240upx;
  margin-right: 0upx;
}

.video-tip{
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.3);
}
.video-tip-icon{
  width: 60upx;
  height:60upx;
}

.album {
  @include flex;
  align-items: flex-start;
  padding: 0 70rpx 0 0;

  &__avatar {
    background-color: $u-bg-color;
    padding: 5px;
    border-radius: 3px;
  }

  &__content {
    margin-left: 10px;
    flex: 1;
  }
}
</style>
